<template>
	<cxView :width="width" :height="bgHeight" :borderRadius="bgBorderRadius" :padding="bgPadding" :margin="bgMargin"
		:marginTop="bgMarginTop" :marginLeft="bgMarginLeft" :marginBottom="bgMarginBottom" :marginRight="bgMarginRight"
		:background="bg" :display="display" :justifyContent="justifyContent" :alignItems="alignItems" :border="bgBorder"
		:show-circula="showCircula">
		<slot name="left"></slot>
		<u-field v-model="data" :placeholder="placeholder" :type="type" :clearable="clearable" :input-align="inputAlign"
			:disabled="disabled" :maxlength="maxlength" :confirm-type="confirmType" :focus="focus" :fixed="fixed"
			:password-icon="passwordIcon" :border="border" :auto-height="autoHeight" :trim="trim" :label="label"
			:label-width="labelWidthCompute" :label-align="labelAlign" :error-message="errorMessage" :icon="icon"
			:border-bottom="borderBottom" :border-top="borderTop" :icon-style="iconStyle" :right-icon="rightIcon"
			:required="required" :field-style="{
			background:fieldBg,
			fontSize:$addUnit(fieldSize),
			color:fieldColor,
			height:$addUnit(height),
			fontWeight:fieldWeight,
			
			
		}" :placeholder-style="placeholderStyle" :style="[{
			height:$addUnit(height),
			fontSize :  $addUnit(size),
			borderRadius : $addUnit(borderRadius),
			borderStyle:borderStyle,
			borderWidth:$addUnit(borderWidth),
			borderColor:borderColor,
			color:color,
			margin:$addUnit(margin),
			marginTop : $addUnit(marginTop),
			marginLeft :$addUnit(marginLeft),
			marginBottom :$addUnit(marginBottom),
			marginRight :$addUnit(marginRight),
			background:background,
			
			},customStyle]" @input="valueChanged" @confirm="confirm" @focus="onFocus" @blur="onBlur"
			@right-icon-click="rightIconClick" @click="onClick" class="flexGrow">

		</u-field>



		<slot name="right"></slot>
	</cxView>
</template>

<script>
	export default {
		name: "cxField",
		data() {
			return {
				labelWidthValue: '',
				data: ''

			};
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					this.data = val;
				}
			},
			data(val) {
				this.$emit('input', val);
			}
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		mounted() {
			this.labelWidthValue = this.labelWidth;
		},
		computed: {

			labelWidthCompute() {
				return this.labelWidthValue;
			}
		},
		methods: {
			/**
			 * 输入时触发
			 * @param {Object} event
			 */
			valueChanged(event) {
				// this.$log(event);
				this.$emit('valueChanged', event);
			},
			/**
			 * 输入框获得焦点时触发
			 */
			onFocus(event) {
				this.$emit('focus', event);
			},

			/**
			 * 输入框失去焦点时触发
			 */
			onBlur(event) {

				this.$emit('blur', event);
			},

			/**
			 * 点击完成按钮时触发
			 */
			confirm(event) {
				this.$emit('confirm', event);

			},
			/**
			 * 通过right-icon生成的图标被点击时触发
			 */
			rightIconClick(event) {
				this.$emit('rightIconClick');
				this.$emit('click');
			},
			/**
			 * 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明
			 */
			onClick(event) {

			},


		},
		props: {
			/**
			 * 父视图属性
			 */

			bgHeight: {
				type: [String, Number],
				default: ''
			},

			bgBorderRadius: {
				type: [String, Number],
				default: ''
			},

			/*
			2rpx solid #005EF4
			*/
			bgBorder: {
				type: String,
				default: ''
			},

			bgPadding: {
				type: String,
				default: ''
			},
			bgMargin: {
				type: String,
				default: ''
			},
			bgMarginTop: {
				type: [String, Number],
				default: ''
			},
			bgMarginLeft: {
				type: [String, Number],
				default: ''
			},
			bgMarginBottom: {
				type: [String, Number],
				default: ''
			},
			bgMarginRight: {
				type: [String, Number],
				default: ''
			},
			bg: {
				type: String,
				default: ''
			},
			opacity: {
				type: [String, Number],
				default: ''
			},
			justifyContent: {
				type: String,
				default: ''
			},
			alignItems: {
				type: String,
				default: ''
			},
			display: {
				type: String,
				default: ''
			},
			showCircula: {
				type: Boolean,
				default: false
			},



			/**
			 * 子视图属性
			 */


			/**
			 * 子视图公众属性
			 */
			borderRadius: {
				type: [String, Number],
				default: ''
			},
			borderWidth: {
				type: [String, Number],
				default: '1'
			},
			borderStyle: {
				type: String,
				default: ''
			},
			/**
			 * text	textarea
			 */
			type: {
				type: String,
				default: 'text'
			},
			/**
			 * 是否显示右侧的清除图标，type = select时无效,默认为true
			 */
			clearable: {
				type: Boolean,
				default: false
			},



			/**
			 * 是否禁用输入框
			 */
			disabled: {
				type: Boolean,
				default: false
			},
			/**
			 * 输入框的最大可输入长度
			 * 默认140
			 */
			maxlength: {
				type: [String, Number],
				default: 1000
			},



			/**
			 * 设置键盘右下角按钮的文字，仅在type为text时生效
			 * 
			 */
			confirmType: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 是否自动获得焦点
			 */
			focus: {
				type: Boolean,
				default: false
			},
			/**
			 * 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true
			 */
			fixed: {
				type: Boolean,
				default: false
			},
			/**
			 * type为password时，是否显示右侧的密码查看图标
			 * 
			 */
			passwordIcon: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否显示边框
			 */
			border: {
				type: Boolean,
				default: false
			},
			/**
			 * 输入框的边框颜色
			 */
			borderColor: {
				type: String,
				default: ''
			},

			/**
			 * 是否自动增高输入区域，type为textarea时有效
			 */
			autoHeight: {
				type: Boolean,
				default: false
			},

			/**
			 * 指定光标与键盘的距离，单位px
			 */
			cursorSpacing: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
			 */
			selectionStart: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
			 */
			selectionEnd: {
				type: [String, Number],
				default: ''
			},

			/**
			 * 是否自动去除两端的空格
			 */
			trim: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否显示键盘上方带有”完成“按钮那一栏
			 */
			showConfirmbar: {
				type: Boolean,
				default: false
			},

			/**
			 * 弹出键盘时是否自动调节高度
			 */
			adjustPosition: {
				type: Boolean,
				default: false
			},

			size: {
				type: [String, Number],
				default: ''
			},
			margin: {
				type: String,
				default: ''
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			marginLeft: {
				type: [String, Number],
				default: ''
			},
			marginBottom: {
				type: [String, Number],
				default: ''
			},
			marginRight: {
				type: [String, Number],
				default: '0'
			},
			background: {
				type: String,
				default: ''
			},



			height: {
				type: [String, Number],
				default: ''
			},


			errorMessage: {
				type: String,
				default: ''
			},
			icon: {
				type: String,
				default: ''
			},
			borderBottom: {
				type: Boolean,
				default: false
			},
			borderTop: {
				type: Boolean,
				default: false
			},
			iconStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			rightIcon: {
				type: String,
				default: ''
			},
			required: {
				type: Boolean,
				default: false
			},



			flexCenter: {
				type: String,
				default: '1'
			},

			flexLeft: {
				type: String,
				default: '1'
			},
			flexRight: {
				type: String,
				default: '1'
			},
			width: {
				type: [String, Number],
				default: 'auto'

			},

			/**
			 * label及field通用属性
			 */
			/**此属性能定义label及输入内容的颜色*/
			color: {
				type: String,
				default: ''

			},
			customStyle: {
				type: String,
				default: ''
				// type:Object,
				// default(){
				// 	return{}
				// }
			},
			/**
			 * 左侧label属性
			 */

			/**
			 * 输入框左边的文字提示
			 */
			label: {
				type: String,
				default: ''
			},
			/**
			 * label的宽度，单位rpx
			 */
			labelWidth: {
				type: [String, Number],
				default: "0"
			},

			/**
			 * label的文字对齐方式
			 */
			labelAlign: {
				type: String,
				default: 'left'
			},



			/**
			 * field属性
			 */
			/**
			 * 输入框文字的对齐方式
			 * left	center / right
			 */
			inputAlign: {
				type: String,
				default: 'left'
			},
			/**
			 * field背景色
			 */
			fieldBg: {
				type: String,
				default: ''
			},
			/**
			 * 输入框字体颜色
			 */
			fieldColor: {
				type: String,
				default: ''
			},
			/**
			 * 输入框字体大小
			 */
			fieldSize: {
				type: String,
				default: ''
			},
			fieldWeight: {
				type: String,
				default: ''
			},
			// 值
			value: {
				type: String,
				default: ''
			},

			/**
			 * placeholder
			 */
			/**
			 * placeholder显示值
			 * 
			 */
			placeholder: {
				type: String,
				default: '请输入'
			},
			/**
			 * placeholderStyle
			 * color:red
			 */
			placeholderStyle: {
				type: String,
				default: ''
			},



		}
	}
</script>

<style lang="scss">
	.u-field {
		padding: unset !important;

	}
</style>